<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jet-CMS | Resource</title>
    <link type="text/css" rel="stylesheet" th:href="@{/pure-min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/main.css}" />
    <script type="text/javascript" th:src="@{/main.js}"></script>
    <script type="text/javascript" th:src="@{/vue-min.js}"></script>
    <style>
        .file-input {
            position: absolute;
            filter: alpha(opacity=0);
            opacity:0;
            width:114px;
            height:34px;
        }
        .c-btns-item {
            padding: 2px;
        }
        .table td a {
            font-size: 14px;
            color: #0095cf
        }
        .table td input {
            border: 1px solid #eee;
            padding: 6px;
            font-size: 14px;
            color: #333;
        }
        .c-img {
            width: 98px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span th:include="home/_nav"></span>
        <div class="container">
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <input v-on:change="uploadFile" class="file-input" type="file">
                    <button type="button" class="pure-button btn-blue">上传资源文件</button>
                </div>
                <div class="pure-u-1-4">
                    文件总数：<b>{{allCount}}</b> 个
                </div>
                <div class="pure-u-1-4 text-right">
                    <form class="pure-form" v-on:submit.prevent="search">
                        <input type="text" class="pure-input" v-model="keyword">
                        <button type="submit" class="pure-button">搜索</button>
                    </form>
                </div>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:200px;">文件名</th>
                        <th>预览</th>
                        <th>存储路径</th>
                        <th>占用空间</th>
                        <th>创建时间</th>
                        <th style="width:50px;">排序</th>
                        <th style="width:150px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in resourceList">
                        <td><input type="text" v-bind:value="item.name" v-on:change="setName(item.id, $event)"/></td>
                        <td><img v-if="item.type=='jpg'||item.type=='jpeg'||item,type='png'" class="c-img" v-bind:src="'/resource/image/'+item.path+'@120'" /></td>
                        <td><a v-bind:href="'/resource/output/'+item.path" target="_blank">{{item.path}}</a></td>
                        <td>{{(item.size/1024).toFixed(2)+' kb'}}</td>
                        <td>{{dateFormat('y-m-d h:i', item.time*1000)}}</td>
                        <td><input style="width:30px;" type="text" v-bind:value="item.sort" v-on:change="setSort(item.id, $event)"/></td>
                        <td>
                            <div class="pure-g">
                                <div class="pure-u-1-2">
                                    <div class="c-btns-item">
                                        <button v-if="bid!=''&&isImage(item.type)" v-on:click="setCover(item.path)" type="button" class="pure-button btn-sm pure-u-1">设为封面</button>
                                    </div>
                                </div>
                                <div class="pure-u-1-2">
                                    <div class="c-btns-item">
                                        <button v-on:click="deleteResource(item.id)" type="button" class="pure-button btn-sm btn-orange pure-u-1">删除</button>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <pagination ref="pageView"></pagination>
        </div>
    </div>
</body>
<script>
    const LIMIT = 10;
    const vue = new Vue({
        el: '#app',
        data: {
            offset: 0,
            bid: '[[${bid}]]',
            entry: '[[${entry}]]',
            keyword: '',
            resourceList: [],
            allCount: 0
        },
        components: {
            pagination: Pagination
        },
        methods: {
            init: function(){
                this.$refs['pageView'].init(LIMIT, 5);
                this.$refs['pageView'].setCallback(function(page){
                    vue.offset = (page - 1) * LIMIT;
                    vue.loadResourceList();
                });
                this.loadResourceList();
            },
            search: function() {
                vue.offset = 0;
                vue.loadResourceList();
            },
            uploadFile: function(event){
                let formData = new FormData();
                formData.append('file', event.target.files[0]);
                formData.append('bid', vue.bid);
                httpRequest(
                    '/resource/upload.do',
                    formData,
                    function(res){
                        if (res.code == 1) {
                            vue.loadResourceList();
                        }
                    },
                    'json', true
                );
            },
            setName: function(id, event) {
                httpRequest(
                    '/resource/setName.do',
                    {id: id, name: event.originalTarget.value},
                    function(res) {
                        if (res.code != 1) {
                            alert(res.error);
                        }
                    },
                    'json'
                )
            },
            setSort: function(id, event) {
                let val = event.originalTarget.value;
                if (!/^\d+$/.test(val) || val <= 0) {
                    alert('排序必须为正整数');
                    return;
                }
                httpRequest(
                    '/resource/setSort.do',
                    {id: id, sort: val},
                    function(res) {
                        if (res.code != 1) {
                            alert(res.error);
                        }
                    },
                    'json'
                )
            },
            setCover: function(path) {
                if (confirm('确定要将该图片设置为封面吗？')) {
                    httpRequest(
                        '/' + vue.entry + '/setCover.do',
                        {id: vue.bid, path: path},
                        function(res) {
                            if (res.code == 1) {
                                alert('操作成功');
                            } else {
                                alert(res.error);
                            }
                        },
                        'json'
                    );
                }
            },
            loadResourceList: function(){
                httpRequest(
                    '/resource/getCount.do',
                    {bid: vue.bid, keyword: vue.keyword},
                    function(res) {
                        if (res.code == 1) {
                            vue.allCount = res.result;
                            vue.$refs['pageView'].setData(res.result);
                        }
                    },
                    'json'
                );
                httpRequest(
                    '/resource/getList.do',
                    {offset: vue.offset, limit: LIMIT, bid: vue.bid, keyword: vue.keyword},
                    function(res) {
                        if (res.code == 1) {
                            vue.resourceList = res.result;
                        }
                    },
                    'json'
                );
            },
            deleteResource: function(id) {
                if (confirm('确定要删除吗？这会导致之前的引用失效！')) {
                    httpRequest(
                        '/resource/delete.do',
                        {id: id},
                        function(res) {
                            vue.loadResourceList();
                        }
                    );
                }
            }
        }
    });
    vue.init();
</script>
</html>